<template>
    <view>
       <scroll-view scroll-x class="bg-white nav tab-view" scroll-with-animation 
	   :scroll-left="scrollLeft" v-if="myData">
		  <block v-for="(item,index) in categories" :index="index">
			  <view class="cu-item" :class="item.id == cat_id ? 'text-blue cur' : ''" :data-id="item.id"  
			  :data-classtype="item.classType" :data-index="index"  @click.stop.prevent="tabSelect">
					{{item.name}}
			  </view>
		  </block>
		</scroll-view>

        <!--新闻列表——常规-->
        <view class="container">
            <view>
                <block v-if="posts.length > 0">
                    <view class="list-box data-v-0034d6f4" :style="myData ? 'margin-top: 100rpx;' : ''">
                        <block v-for="(item,index) in posts" :key="index">
                            
							<block v-if="item.classType == 1" >
								<image :src="item.thumbnail" mode="aspectFill" class="image data-v-0034d6f4" 
								:index="index" :data-id="item.id" 
								@click="handlerArticleClick" :lazy-load="true"></image>
							</block>
							<block v-if="item.classType == 2" >
								<image :src="item.thumbnail" mode="aspectFill" class="image data-v-0034d6f4" 
								:index="index" :data-id="item.id" @click="handlerArticleClick" :lazy-load="true"></image>
							</block>
							<block v-if="item.classType == 3" >
								<image class="background-image data-v-0034d6f4" mode="aspectFill" :src="item.thumbnail" 
								:index="index" :data-id="item.id" @click="handlerArticleClick" :lazy-load="true"></image>
							</block>
							<block v-if="item.classType == 4" >
								<image class="emoticon data-v-0034d6f4" mode="aspectFill" :src="item.thumbnail" 
								:index="index" :data-id="item.id" @click="handlerArticleClick" :lazy-load="true"></image>
							</block>
							<block v-if="item.classType == 5" >
								<image class="emoticon data-v-0034d6f4" mode="aspectFill" :src="item.thumbnail" 
								:index="index" :data-id="item.id" @click="handlerArticleClick" :lazy-load="true"></image>
							</block>
                            
                        </block>
                    </view>
					
					

                    <!--加载loadding-->
                    <tui-loadmore :visible="loadding"></tui-loadmore>
                    <tui-nomore :visible="!pullUpOn"></tui-nomore>
                    <!--加载loadding-->
                </block>
                    <!-- parse <template is="jiangqie_nodata"/> -->
                    <block name="jiangqie_nodata" v-else>
                        <view class="none_tip">
                            <image src="../../static/images/none_tip.png" mode="widthFix"></image>
                            <view class="none_tip_text">
                                <text>什么也没有~</text>
                            </view>
                        </view>
                    </block>
                </block>
            </view>
        </view>


        <!--加载框 start-->
        <tui-loading :visible="loading"></tui-loading>
        <!--加载框 end-->
    </view>
</template>

<script>
import tuiLoading from '../../components/loading/loading';
import tuiLoadmore from '../../components/loadmore/loadmore';
import tuiNomore from '../../components/nomore/nomore';
/*
 * Author: 郭少
 * github: https://github.com/guoshao99/wallpaper-applet
 * gitee: https://gitee.com/guoshao99/wallpaper-applet
 * QQ：2549789059
 * 微信：2549789059
 */
const http = require('../../utils/http.js');

const Constants = require('../../utils/constants');

const Util = require('../../utils/util');

const Api = require('../../utils/api.js');

const Rest = require('../../utils/rest');

const util = require('../../utils/util.js');

const Authentication = require('../../utils/authentication.js');

let setinad;
export default {
    components: {
        tuiLoading,
        tuiLoadmore,
        tuiNomore
    },
    data() {
        return {
			scrollLeft: 0,
			isNewOpen:true,
            posts: [],
            loadding: false,
            pullUpOn: true,
            loaded: false,
            pagead: 2,
            pageNum: 1,
            thisPage: 'list',
            loading: false,

            setAD: {
                banner: '',
                videoid: '',
                gridid: '',
            },
			tag_id: '',
			cat_id: '',
			search: '',
			track: '',
			type: '',
			myData:false,
			classType:1
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
		
		 if (options.cat_id) {
		  //分类
		  uni.setNavigationBarTitle({
			title: options.title
		  });
		  this.cat_id = options.cat_id;
		} else if (options.tag_id) {
		  //标签
		  uni.setNavigationBarTitle({
			title: options.title
		  });
		  this.tag_id = options.tag_id;
		} else if (options.search) {
		  //搜索
		  uni.setNavigationBarTitle({
			title: '搜索【' + options.search + '】'
		  });
		  this.search = options.search;
		} else if (options.track) {
			this.myData = true;
			//加载分类数据
			this.loadClass();
			
		  //我的足迹
		  let title = '我的浏览';
		  this.type = 3;
	
		  if (options.track == 'likes') {
			title = '我的点赞';
			this.type = 2;
		  } else if (options.track == 'favorites') {
			title = '我的收藏';
			this.type = 1;
		  } else if (options.track == 'comments') {
			title = '我的评论';
		  }
	
		  uni.setNavigationBarTitle({
			title: title
		  });
		  this.track = options.track;
		} else {
		  //最新
		  uni.setNavigationBarTitle({
			title: '最新壁纸'
		  });
		}
		
		this.classType = options.classType;

        var that = this;
    },
    onPullDownRefresh: function () {},
    onReachBottom: function () {
        if (!this.pullUpOn) {
            return;
        }

        this.loadPost(false);
    },
    onShow() {
        var that = this;
        util.getAD(that, function () {
			that.setInterstitialAd(); //加载插屏广告
		});
		
		if (this.isNewOpen) {
			if(!that.myData){
				this.loadPost(true);
			}
		}
		
        
    },
    onHide() {
        clearInterval(setinad);
    },
    onShareAppMessage: function () {
        var that = this;
        uni.showShareMenu({
            withShareTicket: true,
            menus: ['shareAppMessage', 'shareTimeline']
        });
        return {
            title: that.shares.share_title,
            imageUrl: that.shares.share_image
        };
    },
    //转发朋友圈
    onShareTimeline: function () {
        var that = this;
        return {
            title: that.shares.share_title,
            imageUrl: that.shares.share_image
        };
    },
    // 收藏
    onAddToFavorites: function () {
        var that = this;
        return {
            title: that.shares.share_title,
            imageUrl: that.shares.share_image
        };
    },
    methods: {
        

        // 获取小程序插屏广告
        setInterstitialAd: function () {
            var that = this;

            if (that.setAD.interstitialid && uni.createInterstitialAd) {
                let interstitialAd = uni.createInterstitialAd({
                    adUnitId: that.setAD.interstitialid
                }); // 监听插屏错误事件

                interstitialAd.onError((err) => {
                    console.error(err);
                }); // 显示广告

                if (interstitialAd) {
                    if (that.setAD.switch_inad == 'yes') {
                        setinad = setInterval(() => {
                            interstitialAd.show().catch((err) => {
                                console.error(err);
                            });
                        }, 2000);
                    } else {
                        setTimeout(() => {
                            interstitialAd.show().catch((err) => {
                                console.error(err);
                            });
                        }, 6000);
                    }
                }
            }
        },

        handlerArticleClick: function (e) {
            let post_id = e.currentTarget.dataset.id;
			this.isNewOpen = false;
			let that = this;
            uni.navigateTo({
                url: '/pages/article/article?post_id=' + post_id + '&myData='+that.myData
            });
        },

        loadPost: function (refresh) {
            let that = this;
            that.setData({
                loadding: true
            });
            let offset = 0;

            if (!refresh) {
                that.pageNum++;
            }

            let url = '';
            let params = {
                pageNum: that.pageNum,
                pageSize: Constants.JQ_PER_PAGE_COUNT
            };


			if (that.cat_id !== undefined && !that.myData) {
			  url = Api.JIANGQIE_POSTS_IMAGES; // 分类
			}else if (that.track !== undefined) {
				url = Api.JIANGQIE_POSTS_MY; //我的浏览
				params.type = this.type;
			}else{
				url = Api.JIANGQIE_POSTS_IMAGES; // 分类
			}
			params.classId = that.cat_id;
			params.classType = that.classType;
            if (that.track) {
				params.openid = Authentication.getUserId();
            } else {
                params.order = -1;
            }

            uni.request({
                url: url,
                data: params,
                method: 'get',
                success: function (res) {
					console.log(res)
					if (res.code == 401) {
					    uni.showToast({
					    	title:res.msg,
							success(res) {
								setTimeout(function(){
									uni.switchTab({
										url:'/pages/ucenter/ucenter'
									})
								},600)
							}
					    })
						
					    return;
					}
                    that.setData({
                        loaded: true,
                        loadding: false,
                        posts: refresh ? res.data.data.list : that.posts.concat(res.data.data.list),
                        pullUpOn: !res.data.data.isLastPage ? true : false
                    });
                },
                fail: function (err) {
                    
                    that.setData({
                        loading: false
                    });
                }
            });
        },
		/**
		 * 分类点击
		 */
		tabSelect: function (e) {
		    let id = e.currentTarget.dataset.id;
		    let classType = e.currentTarget.dataset.classtype;
		
		    if (this.id == id) {
		        return false;
		    }
		
		    this.setData({
		        cat_id: id,
				pageNum: 1,
				classType:classType
		    });
			this.scrollLeft = (e.currentTarget.dataset.index - 1) * 80
		    this.loadPost(true);
		},
		loadClass: function () {
		    //获取配置
		    let that = this; //加载订单列表
		    var params = {
		        url: '/classification/list',
		        method: 'GET',
		        data: {},
		        callBack: function (res) {
					
		            that.setData({
		                categories: res.data,
						cat_id : res.data.length > 0 ? res.data[0].id : 0,
						classType: res.data.length > 0 ? res.data[0].classType : 1
		            });
					
					that.loadPost(true);
					
		        }
		    };
		    http.request(params);
		}

    }
};
</script>
<style>
@import './list.css';
</style>
